<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            height: 600px;
            width: 500px;
            border: 1px solid;
            text-align: center;
        }

        canvas {
            border: 1px solid;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div>
    <input type="color" id="colorInp"/>
    <input type="number" id="number" min="1" max="10"/>
    <button id="lineBtn">画线条</button>
    <button id="rectBtn">画矩形</button>
    <button id="eraserBtn">橡皮擦</button>
    <button id="resetBtn">重置</button>
    <canvas width="380" height="500"></canvas>

</div>

<script>

    var colorInp = document.querySelector("#colorInp");
    var number = document.querySelector("#number");
    var lineBtn = document.querySelector("#lineBtn");
    var rectBtn = document.querySelector("#rectBtn");
    var eraserBtn = document.querySelector("#eraserBtn");
    var resetBtn = document.querySelector("#resetBtn");
    var cas = document.querySelector("canvas");
    var ctx = cas.getContext("2d");

    var DrawObj = {
        //开关
        isDraw: false,
        what: "line",
        sX: 0,
        sY: 0

    }

    cas.onmousedown = function (e) {
        DrawObj.isDraw = true;
        ctx.beginPath();
        //改变线条属性时用
        ctx.strokeStyle = colorInp.value;
        //改变线条的粗细时用
        ctx.lineWidth = number.value;
        //获取鼠标按下时的坐标（画矩形时用的）
        DrawObj.sX = e.offsetX;
        DrawObj.sY = e.offsetY;


    }
    cas.onmousemove = function (e) {
        if (!DrawObj.isDraw) {
            return;
        }
        //点击画线条的时候
        if (DrawObj.what == "line") {
            //获取移动的坐标
            var x = e.offsetX;
            var y = e.offsetY;
            //定点
            ctx.lineTo(x, y);
            //描线
            ctx.stroke();
        }
        if (DrawObj.what == "eraser") {
            //获取移动的坐标
            var x = e.offsetX;
            var y = e.offsetY;
            ctx.clearRect(x, y, 20, 20)
        }


    }
    cas.onmouseup = function (e) {
        DrawObj.isDraw = false;
        //点击画矩形时
        if (DrawObj.what == "rect") {
            //ctx.strokeRect(x,y w,h)
            //获取鼠标抬起时的坐标
            var eX = e.offsetX;
            var eY = e.offsetY;
            //鼠标抬起时的坐标-鼠标按下时的坐标=矩形的宽高
            var width = eX - DrawObj.sX;
            var height = eY - DrawObj.sY;
            //将宽高设置给矩形
            ctx.strokeRect(DrawObj.sX, DrawObj.sY, width, height);

        }
    }
    cas.onmouseout = function (e) {
        DrawObj.isDraw = false;
    }

    //点击画线条
    lineBtn.onclick = function () {
        DrawObj.what = "line"
    }
    //点击画矩形
    rectBtn.onclick = function () {
        DrawObj.what = "rect"
    }

    //点击橡皮擦
    eraserBtn.onclick = function () {
        DrawObj.what = "eraser"
//        ctx.clearRect(x,y,w,h)
    }
    //点击重置
    resetBtn.onclick = function () {
        DrawObj.what = "reset";

        ctx.clearRect(0, 0, cas.width, cas.height)


    }


</script>
</body>
</html>